<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
            style="text-align: left"
        >
            <el-form-item label="所属部门" prop="orgId">
                <treeselect
                    v-model="queryParams.orgId"
                    :options="deptOptions"
                    :show-count="true"
                    placeholder="请选择所属部门"
                    @keyup.enter.native="handleQuery"
                    style="width: 215px"
                />
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
                <el-input
                    v-model="queryParams.realName"
                    placeholder="请输入姓名"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="员工类型" prop="political">
                <el-select
                    v-model="queryParams.staffType"
                    placeholder="请选择员工类型"
                    clearable
                >
                    <el-option
                        v-for="dict in dict.type.hrm_staff_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="核算月份" prop="month">
                <el-date-picker
                    v-model="queryParams.year_month"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="选择核算月份"
                    @change="selectMonth"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <TableCard>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <div>
                        <span>核算周期：</span>
                        <span
                            >{{
                                queryParams.periodYear == null
                                    ? "   暂无   "
                                    : queryParams.periodYear
                            }}年{{
                                queryParams.periodMonth == null
                                    ? "   暂无   "
                                    : queryParams.periodMonth
                            }}月</span
                        >
                        <!--                        <span>至</span>-->
                        <!--                        <span>{{endPeriod}}</span>-->
                    </div>
                </el-col>
            </el-row>
            <el-table
                :border="Global.tableShowBorder"
                v-loading="loading"
                :data="salaryDataList"
            >
                <el-table-column
                    label="姓名"
                    align="center"
                    prop="realName"
                    width="120"
                    fixed="left"
                >
                    <template slot-scope="scope">
                        <router-link
                            :to="
                                '/hrm/staff/book/form/' +
                                scope.row.staffId +
                                '?readonly=1'
                            "
                            class="link-type"
                        >
                            <el-button type="text" size="small">{{
                                scope.row.realName
                            }}</el-button>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column
                    label="部门"
                    align="center"
                    prop="deptName"
                    width="180"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="职位"
                    align="center"
                    prop="postId"
                    width="180"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <span>{{ parsePostName(scope.row.postId) }}</span>
                    </template>
                </el-table-column>
                <!--                <el-table-column label="基本工资" align="center" prop="basic" width="150"/>-->
                <!--                <el-table-column label="岗位工资" align="center" prop="post" width="150"/>-->
                <!--                <el-table-column label="职务工资" align="center" prop="position" width="150"/>-->
                <!--                <el-table-column label="住房补贴" align="center" prop="house" width="150"/>-->
                <!--                <el-table-column label="高温补贴" align="center" prop="temperature" width="150"/>-->
                <!--                <el-table-column label="交通补贴" align="center" prop="traffic" width="150"/>-->
                <!--                <el-table-column label="餐费补贴" align="center" prop="meal" width="150"/>-->
                <!--                <el-table-column label="话费补贴" align="center" prop="phone" width="150"/>-->
                <!--                <el-table-column label="绩效工资" align="center" prop="performance" width="150"/>-->
                <!--                <el-table-column label="月度奖金" align="center" prop="month" width="150"/>-->
                <!--                <el-table-column label="季度奖金" align="center" prop="quarter" width="150"/>-->
                <!--                <el-table-column label="年度奖金" align="center" prop="year" width="150"/>-->
                <!--                <el-table-column label="全勤奖金" align="center" prop="attendance" width="150"/>-->
                <!--                <el-table-column label="内推奖金" align="center" prop="recommend" width="150"/>-->
                <!--                <el-table-column label="销售提成" align="center" prop="sale" width="150"/>-->
                <!--                <el-table-column label="计件工资" align="center" prop="calcCount" width="150"/>-->
                <!--                <el-table-column label="计时工资" align="center" prop="calcTime" width="150"/>-->
                <!--                <el-table-column label="工龄工资" align="center" prop="workAge" width="150"/>-->
                <!--                <el-table-column label="司龄工资" align="center" prop="comAge" width="150"/>-->
                <!--                <el-table-column label="职称工资" align="center" prop="professional" width="150"/>-->
                <!--                <el-table-column label="技能工资" align="center" prop="skill" width="150"/>-->
                <!--                <el-table-column label="学历工资" align="center" prop="education" width="150"/>-->
                <!--                <el-table-column label="个人社保" align="center" prop="grsb" width="150"/>-->
                <!--                <el-table-column label="个人公积金" align="center" prop="grgjj" width="150"/>-->
                <!--                <el-table-column label="企业社保" align="center" prop="qysb" width="150"/>-->
                <!--                <el-table-column label="企业公积金" align="center" prop="qygjj" width="150"/>-->
                <!--                <el-table-column label="税前补发" align="center" prop="sqbf" width="150"/>-->
                <!--                <el-table-column label="税前补扣" align="center" prop="sqbk" width="150"/>-->
                <!--                <el-table-column label="税后补发" align="center" prop="shbf" width="150"/>-->
                <!--                <el-table-column label="党费" align="center" prop="df" width="150"/>-->
                <!--                <el-table-column label="工会费" align="center" prop="ghf" width="150"/>-->
                <!--                <el-table-column label="补充医疗" align="center" prop="bcyl" width="150"/>-->
                <!--                <el-table-column label="商业保险金" align="center" prop="sybxj" width="150"/>-->
                <!--                <el-table-column label="加班工资" align="center" prop="gz996" width="150"/>-->
                <!--                <el-table-column label="迟到扣款" align="center" prop="cdkk" width="150"/>-->
                <!--                <el-table-column label="早退扣款" align="center" prop="ztkk" width="150"/>-->
                <!--                <el-table-column label="旷工扣款" align="center" prop="kgkk" width="150"/>-->
                <!--                <el-table-column label="缺卡扣款" align="center" prop="qkkk" width="150"/>-->
                <!--                <el-table-column label="假期扣款" align="center" prop="jqkk" width="150"/>-->
                <!--                <el-table-column label="综合扣款" align="center" prop="zhkk" width="150"/>-->
                <!--                <el-table-column label="考勤扣款合计" align="center" prop="kqkkhj" width="150"/>-->
                <!--                <el-table-column label="子女教育" align="center" prop="kcZnjy" width="150"/>-->
                <!--                <el-table-column label="住房租金" align="center" prop="kcZfzj" width="150"/>-->
                <!--                <el-table-column label="住房贷款利息" align="center" prop="kcFdlx" width="150"/>-->
                <!--                <el-table-column label="赡养老人" align="center" prop="kcSylr" width="150"/>-->
                <!--                <el-table-column label="继续教育" align="center" prop="kcJxjy" width="150"/>-->
                <!--                <el-table-column label="应发工资" align="center" prop="yfgz" width="150"/>-->
                <!--                <el-table-column label="应税工资" align="center" prop="ysgz" width="150"/>-->
                <!--                <el-table-column label="个人所得税" align="center" prop="grsds" width="150"/>-->

                <el-table-column
                    v-for="type in salaryTypeList"
                    :label="type.name"
                    align="center"
                >
                    <el-table-column
                        v-for="item in salaryConfigList"
                        v-if="item.type == type.id"
                        :label="item.name"
                        align="center"
                        :prop="item.code"
                        width="150"
                    />
                </el-table-column>

                <el-table-column
                    label="实发工资"
                    align="center"
                    prop="sfgz"
                    width="150"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <span style="color: red; font-weight: 900">{{
                            scope.row.sfgz
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    fixed="right"
                    width="100"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['hrm:salaryData:edit']"
                        >
                            查看详细
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </TableCard>

        <el-drawer
            title="工资详细"
            :visible.sync="open"
            :size="1000"
            append-to-body
            class="openForm"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="120px"
                disabled
            >
                <div v-for="type in salaryTypeList" v-if="type.status == '0'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24">
                        <el-divider content-position="left">{{
                            type.name
                        }}</el-divider>
                    </el-col>
                    <el-col
                        :xs="24"
                        :sm="12"
                        :md="12"
                        :lg="12"
                        v-for="item in salaryConfigList"
                        v-if="item.type == type.id"
                    >
                        <el-form-item :label="item.name" :prop="item.code">
                            <el-input type="number" v-model="form[item.code]">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </div>
            </el-form>
            <div class="drawer-footer">
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { getMaxMonth, getSalaryData, mySalary } from "@/api/hrm/salaryData";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listPostAll } from "@/api/system/post";
import { listSalaryItemConfig } from "@/api/hrm/salaryItemConfig";

export default {
    name: "SalaryData",
    dicts: ["hrm_staff_type"],
    components: { Treeselect },
    data() {
        return {
            salaryTypeList: [
                { id: "0", name: "基本工资", status: "1" },
                { id: "1", name: "津贴", status: "1" },
                { id: "2", name: "浮动工资", status: "1" },
                { id: "3", name: "奖金", status: "1" },
                { id: "4", name: "提成工资", status: "1" },
                { id: "5", name: "计件工资", status: "1" },
                { id: "6", name: "计时工资", status: "1" },
                { id: "7", name: "工龄/司龄工资", status: "1" },
                { id: "8", name: "职称工资", status: "1" },
                { id: "9", name: "代扣代缴", status: "1" },
                { id: "10", name: "企业代缴", status: "1" },
                { id: "11", name: "税前补发", status: "1" },
                { id: "12", name: "税前补扣", status: "1" },
                { id: "13", name: "税后补发", status: "1" },
                { id: "14", name: "税后补扣", status: "1" },
                { id: "15", name: "特殊计费项", status: "1" },
                { id: "16", name: "加班工资", status: "1" },
                { id: "17", name: "考勤组扣款明细", status: "1" },
                { id: "18", name: "个税抵扣", status: "1" },
                { id: "50", name: "应发工资", status: "1" },
                { id: "51", name: "应税工资", status: "1" },
                { id: "52", name: "个人所得税", status: "1" },
                { id: "53", name: "实发工资", status: "1" },
            ],
            salaryConfigList: [],
            deptOptions: [],
            postList: [],
            //核算月份
            startPeriod: "暂无",
            endPeriod: "暂无",
            showInitData: false,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 工资核算表格数据
            salaryDataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                orderByColumn: "createTime",
                isAsc: "descending",
                staffId: null,
                code: null,
                name: null,
                amt: null,
                periodYear: null,
                periodMonth: null,
                year_month: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            periodYear: "",
            periodMonth: "",
            // calcForm: {},
        };
    },
    created() {
        this.getSalaryConfigList();
        this.getTreeselect();
        this.getPostData();
        this.initList();
    },
    methods: {
        // 表单重置
        reset() {
            this.form = {
                id: null,
                staffId: null,
                periodYear: null,
                periodMonth: null,
                createTime: null,
                createBy: null,
                tenantId: null,
                basic: null,
                post: null,
                position: null,
                house: null,
                temperature: null,
                traffic: null,
                meal: null,
                phone: null,
                performance: null,
                month: null,
                quarter: null,
                year: null,
                attendance: null,
                recommend: null,
                sale: null,
                calcCount: null,
                calcTime: null,
                workAge: null,
                comAge: null,
                professional: null,
                skill: null,
                education: null,
                grsb: null,
                grgjj: null,
                qysb: null,
                qygjj: null,
                sqbf: null,
                sqbk: null,
                shbf: null,
                df: null,
                ghf: null,
                bcyl: null,
                sybxj: null,
                gz996: null,
                cdkk: null,
                ztkk: null,
                kgkk: null,
                jqkk: null,
                qkkk: null,
                zhkk: null,
                kqkkhj: null,
                kcZnjy: null,
                kcZfzj: null,
                kcFdlx: null,
                kcSylr: null,
                kcJxjy: null,
                yfgz: null,
                ysgz: null,
                grsds: null,
                sfgz: null,
                custom53: null,
                custom54: null,
            };
            this.resetForm("form");
        },
        /** 查询工资核算列表 */
        initList() {
            //查询数量
            getMaxMonth().then((res) => {
                this.loading = false;
                if (res.data.max != "noData") {
                    let arr = res.data.max.split("-");
                    let next = res.data.next.split("-");
                    // this.calcForm.periodYear = next[0];
                    // this.calcForm.periodMonth = next[1];
                    this.queryParams.periodYear = arr[0];
                    this.queryParams.periodMonth = arr[1];
                    this.queryParams.year_month = arr[0] + "-" + arr[1];
                    this.getList();
                }
            });
        },
        getList() {
            this.loading = true;
            mySalary(this.queryParams).then((response) => {
                this.salaryDataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        getSalaryConfigList() {
            listSalaryItemConfig().then((res) => {
                this.salaryConfigList = res.data;
                let typeArr = this.salaryTypeList;
                this.salaryConfigList.forEach((item) => {
                    typeArr.forEach((t) => {
                        console.log(
                            item.type +
                                "," +
                                item.name +
                                "。" +
                                t.id +
                                "," +
                                t.name
                        );
                        if (t.id == item.type) {
                            if (item.status == "0") {
                                t.status = "0";
                            }
                        }
                    });
                });
                this.salaryTypeList = typeArr;
            });
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 查询按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;

            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        getPostData() {
            listPostAll().then((res) => {
                this.postList = res.data;
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getSalaryData(id).then((response) => {
                this.form = response.data;
                this.open = true;
            });
        },
        parsePostName(ids) {
            let nameArr = [];
            if (ids) {
                let selIds = ids.split(",");
                this.postList.forEach((item) => {
                    selIds.forEach((sel) => {
                        if (item.postId == sel) {
                            nameArr.push(item.postName);
                        }
                    });
                });
            }
            return nameArr.join(",");
        },
        ifHave(code) {
            let re = false;
            this.salaryConfigList.forEach((item) => {
                if (item.code == code) {
                    if (item.status == "0") {
                        re = true;
                    }
                }
            });
            return re;
        },
        ifTypeHava(type) {
            let re = false;
            this.salaryConfigList.forEach((item) => {
                if (item.type == type) {
                    if (item.status == "0") {
                        re = true;
                    }
                }
            });
            return re;
        },
        calcTatal() {},
        selectMonth(value) {
            console.log(value);
            if (value) {
                let arr = value.split("-");
                this.queryParams.periodYear = arr[0];
                this.queryParams.periodMonth = arr[1];
            }
        },
    },
};
</script>
